<template>
<!--    :style="{height:WinHeight+'px',width:WinWidth+'px'}"-->
    <div class="index"   :style="{height:WinHeight+'px',width:WinWidth+'px'}">
        <div class="top" >
           <div class="top_name" style="-webkit-app-region: drag;">

               <div class="top_name_box">
                   Admin
               </div>
           </div>
           <div class="top_time">
              <span>{{CurrTime}}</span>
              <span style="margin-left: 5px">{{CurrWeek}}</span>
           </div>
            <div class="top_btn" style="z-index: 9999;">
                <div class="top_btn_img" @click="SetMixFun()">
                    <img  src="../../assets/images/最小化.png">
                </div>
                <div class="top_btn_img" @click="SetReductionFun()">
                    <img  src="../../assets/images/还原.png">
                </div>
                <div class="top_btn_img" @click="SetCloseFun">
                    <img  src="../../assets/images/关闭.png">
                </div>
<!--                <span class="el-icon-minus" style="cursor: pointer" @click="SetMixFun"></span>-->
<!--                <span class="el-icon-full-screen" style="cursor: pointer" @click="SetReductionFun"></span>-->
<!--                <span class="el-icon-close" style="cursor: pointer" @click="SetCloseFun"></span>-->
            </div>
        </div>
        <div class="main">
            <div class="main_left">
                <div class="SelBox">
                    <el-upload style="margin-left: 8px;"
                               class="upload-demo inline-block margin-right-10"
                               action=""
                               :on-change="handleChange"
                               :show-file-list="false"
                               :on-remove="handleRemove"
                               :file-list="fileListUpload"
                               :limit="limitUpload"
                               accept=".dcm"
                               :auto-upload="false">
                         <span class="SelBox_wz">
                              Select patient information：
                         </span>
                    </el-upload>

                </div>
                <div class="ConBox">
                    <div class="ConBoxDiv">
                        <div class="ConBoxRow">
                            <div class="left_label">institution：</div>
                            <div class="left_value">
                                <el-tooltip   effect="light" content=" ZhongShan Hospital" placement="right">
                                    <span>ZhongShan Hospital</span>
                                </el-tooltip>
                            </div>
                        </div>
                        <div class="ConBoxRow">
                            <div class="left_label">Name：</div>
                            <div class="left_value">ZhangSan</div>
                        </div>
                        <div class="ConBoxRow">
                            <div class="left_label">Patient ID：</div>
                            <div class="left_value">7599979</div>
                        </div>
                        <div class="ConBoxRow">
                            <div class="left_label">PatientSex：</div>
                            <div class="left_value">M</div>
                        </div>
                        <div class="ConBoxRow">
                            <div class="left_label">Patient Age：</div>
                            <div class="left_value">19</div>
                        </div>
                        <div class="ConBoxRow">
                            <div class="left_label">Physician：</div>
                            <div class="left_value">Wang</div>
                        </div>
                        <div class="ConBoxRow">
                            <div class="left_label">Study Description：</div>
                            <div class="left_value">
                                <el-tooltip   effect="light" content=" ABDOMEN" placement="right">
                                    <span>ABDOMEN</span>
                                </el-tooltip>
                            </div>
                        </div>
                        <div class="ConBoxRow">
                            <div class="left_label">Tratment Unit：</div>
                            <div class="left_value">
                                <el-tooltip   effect="light" content=" True Beam1" placement="right">
                                    <span>True Beam1</span>
                                </el-tooltip>
                            </div>
                        </div>
                        <div class="ConBoxRow">
                            <div class="left_label">Cone：</div>
                            <div class="left_value">
                                <el-tooltip   effect="light" content=" Cone#1/Cone#3/Cone#4/Cone#5" placement="right">
                                    <span>Cone#1/Cone#3/Cone#4/Cone#5</span>
                                </el-tooltip>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
            <div class="main_right">
                <div class="ComBox" v-for="(item,i) in list">
                    <div class="ComName">
                        {{item.name}}
                    </div>
                    <div class="ConSize">
                        Diamctor：<span>{{item.size}}mm</span>
                    </div>
                    <div class="ConTime">
                        <i style="margin-right: 5px;position: relative;top: 1px"><img src="../../assets/images/djs.png" alt=""></i>{{item.time.toFixed(2)}}s
                    </div>
                    <div class="ConDesc">
                        Treatment time
                    </div>
                    <div class="ConBtn">
                        <el-switch
                                @change="SwithFun(item,i)"
                                :disabled="item.IsDisabled"
                                v-model="item.IsActiveed"
                                active-color="#24baa6"
                                active-text="ON"
                                inactive-text="OFF"
                                :validate-event="true"
                                :width="100"
                                inactive-color="#828181">
                        </el-switch>
                    </div>
                </div>

            </div>
            <div class="main_center">
                <div class="TypeBox">
                    <div class="TypeName">
                        {{ActiceName}}
                    </div>
                    <div class="TypeSize">
                        {{ActiceSize}}
                    </div>
                </div>
                <div class="pointer" :class="ActiceClass" v-show="ActiceClass!='p0'">
                    <img src="../../assets/images/zz.png">
                </div>
            </div>
        </div>
        <div class="bottom">
            <div class="dicom" ref="dicomImage"></div>
        </div>
    </div>
</template>

<script>

const remote = require('electron').remote
var electron = require('electron')
const Menu = remote.Menu
const MenuItem = remote.MenuItem
let {ipcRenderer} = require('electron')
  export default {
    name: 'index',
    data () {
      return {
        CurrTime:this.dateFormat('YYYY-mm-dd HH:MM:SS',new Date()),
        CurrWeek:this.GetWeek(),
        fileListUpload: [],
        limitUpload: 3,
        disabled: false,
        accountList:[],
        // WinHeight: electron.screen.getPrimaryDisplay().workAreaSize.height + 40,
        // WinWidth: electron.screen.getPrimaryDisplay().workAreaSize.width,
        WinHeight: 768,
        WinWidth: 1388,
        value: false,
        ActiceName: '',
        ActiceClass: 'p0',
        ActiceSize: '',
        list: [
          {
            name: 'Cone#1',
            size: '5',
            time: 30.00,
            IsActiveed: false,
            IsDisabled: false
          },
          {
            name: 'Cone#2',
            size: '10',
            time: 30.00,
            IsActiveed: false,
            IsDisabled: false
          },
          {
            name: 'Cone#3',
            size: '15',
            time: 30.00,
            IsActiveed: false,
            IsDisabled: false
          },
          {
            name: 'Cone#4',
            size: '20',
            time: 30.00,
            IsActiveed: false,
            IsDisabled: false
          }
        ],
        disTime: null
      }
    },
    beforeCreate(){

    },
    mounted () {
    this.initData();
  },
    created () {

    },
    methods: {
      initData(){
        var self=this;
        setInterval(function () {
          self.initDate();
        },1000)
        // remote.getCurrentWindow().setSize(this.WinWidth, this.WinHeight)
        // remote.getCurrentWindow().fullscreen=true;
        let template = [
          {label: '刷新', role: 'reload', accelerator: 'F5'},
          {label: '退出', role: 'quit', accelerator: 'Alt+F4'},
          {label: '最小化', role: 'minimize'},
          {label: '全屏', role: 'togglefullscreen'}

        ]
        let menu = Menu.buildFromTemplate(template)
        // const menu = new Menu();
        // menu.append(new MenuItem({label:'撤销', role: 'undo' }));
        window.addEventListener('contextmenu', function (e) {
          e.preventDefault()
          menu.popup(remote.getCurrentWindow())
        })

        const that = this
        window.onresize = () => {
          return (() => {
            window.screenWidth = document.body.clientWidth
            window.screenHight =document.documentElement.clientHeight;
            that.WinHeight=window.screenHight
            that.WinWidth=  window.screenWidth
          })()
        }
      },
      SetMixFun(){
        remote.getCurrentWindow().minimize(); // 窗口最小化
      },
      SetReductionFun(){
        const win=remote.getCurrentWindow();
        if(win.isFullScreen()){ // 判断 窗口是否已最大化
          win.restore();
          win.setFullScreen(false)
          ipcRenderer.send('window-small')
        }else{
          win.setFullScreen(true)
          win.maximize();
          ipcRenderer.send('window-max')
        }
      },
      SetCloseFun(){
        remote.getCurrentWindow().close(); // 关闭窗口，也结束了所有进程
        // ipcRenderer.send('closed')
      },
      initDate(){
        var self=this;
        var time=new Date();
        self.CurrTime=self.dateFormat('YYYY-mm-dd HH:MM:SS',time)
        self.CurrWeek=self.GetWeek();
      },
      dateFormat(fmt, date) {
        let ret;
        const opt = {
          "Y+": date.getFullYear().toString(),        // 年
          "m+": (date.getMonth() + 1).toString(),     // 月
          "d+": date.getDate().toString(),            // 日
          "H+": date.getHours().toString(),           // 时
          "M+": date.getMinutes().toString(),         // 分
          "S+": date.getSeconds().toString()          // 秒
          // 有其他格式化字符需求可以继续添加，必须转化成字符串
        };
        for (let k in opt) {
          ret = new RegExp("(" + k + ")").exec(fmt);
          if (ret) {
            fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
          };
        };
        return fmt;
      },
      GetWeek(){
        var myDate=new Date();
        var days = myDate.getDay();
        switch(days) {
          case 1:
            days = '星期一';
            break;
          case 2:
            days = '星期二';
            break;
          case 3:
            days = '星期三';
            break;
          case 4:
            days = '星期四';
            break;
          case 5:
            days = '星期五';
            break;
          case 6:
            days = '星期六';
            break;
          case 0:
            days = '星期日';
            break;
        }
        return days;
      },
      handleChange(file, fileList){

        // this.$http.get('', {
        //   params: { // 参数
        //
        //   }
        // }).then(res => { // 请求成功后的处理函数
        //
        // }).catch(err => { // 请求失败后的处理函数
        //   console.log(err)
        // })
      },
      handleRemove(file, fileList) {
        this.fileTemp = null
      },
      SwithFun (item, num) {
        var self = this
        self.ActiceName = item.name.split('Cone')[1]
        self.ActiceClass = 'p' + item.name.split('#')[1]

        self.ActiceSize = 'Φ' + item.size
        console.log(this.list)
        this.list.forEach(function (res) {
          // if(item.name!=res.name)
          // {
          //   res.IsDisabled=true;
          // }
          res.IsDisabled = true
        })
        var i = 0
        self.disTime = setInterval(function () {
          i++
          self.list[num].time = self.list[num].time - 1
          if (i == 30) {
            self.list[num].time = 0
            // self.ActiceName="";
            // self.ActiceSize="";
            // self.list[num].IsActiveed=false;
            clearInterval(self.disTime)
            self.list.forEach(res => {
              if (res.time == 0) {
                res.IsDisabled = true
              } else {
                res.IsDisabled = false
              }
            })
          }
        }, 1000)
      }
    }
  }
</script>
<style>
    body{
        overflow: hidden;
    }
</style>
<style lang="scss" scoped>

    .index {
        /*width: 1920px;*/
        /*height: 1080px;*/
        /*width: 100%;*/
        /*height: 100%;*/
        background-color: #242424;
        background-size: 100% 100%;
        overflow: hidden;

    }
    .top{
        width: 100%;
        height: 10%;

        text-align: center;

        color: #ffffff;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
    .top_name{
        width: 90%;
        /*border: 1px solid red;*/
        height: 50px;
        font-size: 40px;
        line-height: 145px;
        cursor: pointer;
        float: left;
        .top_name_box{
            width: 200px;
            position: absolute;
            top: -20px;
        }
    }
    .top_time  {
        /*width: 280px;*/
        height: 50px;
        line-height: 50px;
        /*float: right;*/
        /*border: 1px solid red;*/
        margin-top: 50px;
        position: absolute;
        right: 30px;
    }
    .main{
        width: 100%;
        height: 80%;
        overflow: hidden;
        background:url("../../assets/images/bg.png") center no-repeat;
        background-size: 100% 100%;
        position: relative;
    }
    .bottom{
        height: 10%;
        width: 100%;
    }
    .main_left{
        width: 20%;
        height: 60%;
        margin-left: 4%;
        position: relative;
        top: 15%;
        .SelBox{
            width: 90%;
            height: 45px;
            border-radius: 50px;
            border: 1px solid #24baa6;
            color: #24baa6;
            line-height: 45px;
            font-size: 1.1em;
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -khtml-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            cursor: pointer;
        }
        .SelBox_wz{
            margin-left: 20px;
        }
        .ConBox{
            width: 100%;
            height: 95%;
            background-color: #5e5e5e;
            border-radius: 30px;
            margin-top: 45px;
        }
        .ConBoxDiv{
            width: 90%;
            margin: 0 auto;
            /*margin-top: 50px;*/
            padding-top: 20px;
        }
        .ConBoxRow{
            width: 100%;
            border-bottom: 1px solid #727272;
            overflow: hidden;
            text-overflow:ellipsis;
            white-space: nowrap;
            padding: 2.5% 0 2.5% 0;
            .left_label{
                color: #fff;
                height: 10%;
                display: inline-block;
                font-size: 1.0em;
                -webkit-touch-callout: none;
                -webkit-user-select: none;
                -khtml-user-select: none;
                -moz-user-select: none;
                -ms-user-select: none;
                user-select: none;
            }
            .left_value{
                color: #fff;
                display: inline-block;
                font-size: 1.0em;
            }
        }
    }

    .main_right{
        width: 25%;
        height: 60%;
        position: absolute;

        right:4%;
        top: 170px;
        .ComBox{
            width: 45%;
            height: 50%;
            background-color: #5e5e5e;
            margin-left: 5%;
            display: inline-block;
            border-radius: 30px;
            margin-bottom: 5%;
            vertical-align: top;
            color: #fff;
            .ComName{

                font-size: 1.4em;
                margin-left: 20px;
                margin-top: 10%;
            }
            .ConSize{
                margin-left: 20px;
                font-size: 0.80em;
                font-family: "微软雅黑 Light";
                color: #b4b4b4;
            }
            .ConTime{
                margin-left: 20px;
                margin-top: 15px;
                font-size: 1.4em;
            }
            .ConDesc{
                margin-left: 20px;
                font-size: 0.80em;
                font-family: "微软雅黑 Light";
                color: #b4b4b4;
            }
            .ConBtn{
                margin-left: -10px;
                margin-top: 12%;
            }
        }
    }
    .main_center{
        width: 40%;
        height: 80%;
        margin: 0 auto;
        position: relative;
        top: -50%;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        .TypeBox{
            width:100%;
            height: 90px;
            /*border: 1px solid red;*/
            position: absolute;
            /*margin-top: 320px;*/
            top: 45%;
            font-size: 1.4em;
            text-align: center;
            font-weight: bold;
            .TypeName{
                color: #24baa6;

            }
            .TypeSize{
                color: #24baa6;
            }
        }
    }

    .pointer{
        position: absolute;
    }

    .p1{
        left: 30%;
        top:55%;
        transform: rotate(-120deg);
    }
    .p2{
        left: 28%;
        top: 45%;
        transform: rotate(-90deg);
    }
    .p3{
        left: 30%;
        top: 34%;
        transform: rotate(-60deg);
    }
    .p4{
        left: 38%;
        top: 26%;
        transform: rotate(-35deg);
    }
    .p5{
        left: 47%;
        top: 24%;
        transform: rotate(0deg);
    }
    .p6{
        left: 57%;
        top: 27%;
        transform: rotate(30deg);
    }
    .p7{
        left: 63%;
        top: 35%;
        transform: rotate(60deg);
    }
    .p8{
        left: 65%;
        top: 45%;
        transform: rotate(90deg);
    }
    .p9{
        left: 62%;
        top: 55%;
        transform: rotate(118deg);
    }
    .top_btn{
        width: 100px;
        height: 30px;
        /*border: 1px solid red;*/
        position: absolute;
        right: 20px;
        top: 10px;
        .top_btn_img{
            width: 25%;
            display: inline-block;
            height: 30px;
            cursor: pointer;
            img {
                width: 100%;
            }
        }
    }

</style>
<style >
    .el-switch__label--left {
        position: relative;
        left: 100px;
        color: #fff!important;
        z-index: -1111;
        font-size: 50px !important;
        top: -12px!important;
    }
    .el-switch__label--right {
        position: relative;
        right: 100px;
        color: #fff!important;
        z-index: -1111;
        font-size: 50px !important;
        top: -12px!important;
    }
    .el-switch__label--right.is-active {
        z-index: 1111;
        color: #fff !important;
    }
    .el-switch__label--left.is-active {
        z-index: 1111;
        color: #9c9c9c !important;
    }
    .el-switch__core{
        height: 50px !important;
        width: 100px;
        border-radius: 25px!important;
    }
    .el-switch__core:after{
        width: 55px!important;
        height: 55px!important;
        top: -4px!important;
    }
    .el-switch.is-checked .el-switch__core::after{
        margin-left: -36px!important;
    }



    @media (min-width: 540px) {

        body {

            font: 10px/ 1.5 Microsoft YaHei, Helvitica, Verdana, Arial, san-serif;

        }

    }
    @media (min-width: 768px) {

        body {

            font: 10px/ 1.5 Microsoft YaHei, Helvitica, Verdana, Arial, san-serif;

        }

    }
    @media (min-width: 992px) {

        body {

            font: 10px/ 1.5 Microsoft YaHei, Helvitica, Verdana, Arial, san-serif;

        }

    }
    @media (min-width: 1360px) {

        body {
            font: 12px/ 1.5 Microsoft YaHei, Helvitica, Verdana, Arial, san-serif;
        }
    }
    @media (min-width: 1360px) {

        body {
            font: 13px/ 1.5 Microsoft YaHei, Helvitica, Verdana, Arial, san-serif;
        }
    }
    @media (min-width: 1600px) {

        body {
            font: 16px/ 1.5 Microsoft YaHei, Helvitica, Verdana, Arial, san-serif;
        }
    }
    @media (min-width: 1920px) {

        body {
            font: 20px/ 1.5 Microsoft YaHei, Helvitica, Verdana, Arial, san-serif;
        }
    }



</style>
